<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>房源管理</el-breadcrumb-item>
        <el-breadcrumb-item>看房请求</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-row :gutter="25">
              <el-col :span="8">
                  <el-date-picker
                    v-model="dataValue"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="请求开始时间"
                    end-placeholder="请求结束时间"
                    size="small"
                    :picker-options="pickerOptions"
                    @change="initTime"
                    format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
              </el-col>
              <el-col :span="4">
                  <el-select v-model="queryParams.status" filterable clearable placeholder="请求状态" size="small">
                    <el-option
                    v-for="item in statusList"
                    :key="item.id"
                    :label="item.keyDesc"
                    :value="item.value">
                    </el-option>
                </el-select>

              </el-col>
              <el-col :span="2" >
                  <el-button size="small" type="success" @click="queryPage" icon="el-icon-search" v-if="permissionStrValue.indexOf('houseRequest:query') !== -1">查询</el-button>
              </el-col>
            </el-row>
            <el-divider></el-divider>

             <!--放表格-->
        <el-table :data="list" border stripe width="100%">
            <el-table-column type="index" label="#"></el-table-column>
            <el-table-column label="租客名称" >
                <template slot-scope="scope">
                    <span style="color:#67C23A" size="medium">{{ scope.row.rentUserName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="项目/小区" >
                <template slot-scope="scope">
                    <span style="color:#67C23A" size="medium">{{scope.row.houseTitle}}</span>
                </template>
            </el-table-column>
            <el-table-column label="请求时间" >
                <template slot-scope="scope">
                    <span style="color:#67C23A" size="medium">{{ scope.row.requestTime }}</span>
                </template>
            </el-table-column>
            <el-table-column label="看房时间" >
                <template slot-scope="scope">
                    <span style="color:#67C23A" size="medium">{{ scope.row.viewTime}}</span>
                </template>
            </el-table-column>
            <el-table-column label="请求状态" >
                <template slot-scope="scope">
                    <span style="color:#67C23A" size="medium">{{ scope.row.status}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="250px">
                 <template slot-scope="scope">
                     <el-button type="primary" size="small" @click="infoItem(scope.row.id)" icon="el-icon-edit" v-if="permissionStrValue.indexOf('houseRequest:info') !== -1">详情</el-button>
                     <el-button type="warning" size="small" @click="logStep(scope.row.id)" icon="el-icon-check" v-if="permissionStrValue.indexOf('houseRequest:statusInfo') !== -1">状态流程</el-button>
                 </template>
            </el-table-column>
        </el-table>
         <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParams.currPage"
          :page-sizes="[10,20, 30, 40, 50]"
          :page-size="queryParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>

        <el-dialog
       title="详情"
       :visible.sync="infoFlag"
       width="70%"
       >
       <span style="color:#409EFF">状态：{{info.status}}</span>
       <el-divider></el-divider>
       <span style="color:red;margin-bottom:15px">楼盘信息</span>
       <el-form :model="info" label-width="100px" ref="infoForm" label-position="left" >
         <el-form-item label="楼盘名称" >
           <el-input v-model="info.estateName" size="small" type="text" style="width:400px" disabled></el-input>
         </el-form-item>
         <el-form-item label="省市区" >
            <el-input v-model="info.province" size="small" type="text" style="width:100px" disabled></el-input>
            <el-input v-model="info.city" size="small" type="text" style="width:100px;margin-left:10px" disabled></el-input>
            <el-input v-model="info.area" size="small" type="text" style="width:100px;margin-left:10px" disabled></el-input>
         </el-form-item>
         <el-form-item label="详细地址" prop="address">
           <el-input v-model="info.address" size="small" style="width:400px"  disabled></el-input>
         </el-form-item>
         
         <!-- ------------------------------------------房源信息---------------------------------------------- -->
         <el-divider></el-divider>
          <span style="color:red">房源信息</span>

        <el-form-item label="房源标题" >
            <el-input v-model="info.houseTitle" style="width:400px" size="small" disabled ></el-input>
        </el-form-item>
        <el-row>
            <el-col :span="8">
                <el-form-item label="租客姓名">
                    <el-input v-model="info.rentUserName" style="width:200px" size="small" disabled ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="租客电话">
                    <el-input v-model="info.phone" style="width:200px" size="small" disabled ></el-input>
                </el-form-item>
            </el-col>
            
        </el-row>
        <el-row>
            <el-col :span="8">
                <el-form-item label="房主姓名">
                    <el-input v-model="info.hostName" style="width:200px" size="small" disabled ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="租客电话">
                    <el-input v-model="info.hostPhone" style="width:200px" size="small" disabled ></el-input>
                </el-form-item>
            </el-col>
            
        </el-row>
         <el-row>
            <el-col :span="8">
                <el-form-item label="请求时间">
                    <el-input v-model="info.requestTime" style="width:200px" size="small" disabled ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="看房时间">
                    <el-input v-model="info.viewTime" style="width:200px" size="small" disabled ></el-input>
                </el-form-item>
            </el-col>
            
        </el-row>
       </el-form>

        

     </el-dialog>

     <el-dialog title="状态流程" :visible.sync="logFlag" width="70%" >
        <el-steps :active="logList.length" align-center>
            <el-step v-for="(item,index) in stepTitleList" :key="index" 
            :title="item" 
            :description="index <= logList.length ? descList[index] : nullVale">
            </el-step>
        </el-steps>
       
      </el-dialog>


        </el-card>




    </div>
</template>
<script>
export default {
    name: 'HouseRequest',
    data() {
        return {
            dataValue: '',
            queryParams: {
                requestTimeStart: '',
                requestTimeEnd: '',
                status: '',
                currPage: 1,
                pageSize: 10
            },
            info: {
                id: '',
                rentUserName: '',
                phone: '',
                hostName: '',
                hostPhone: '',
                estateName: '',
                houseTitle: '',
                province: '',
                city: '',
                area: '',
                address: '',
                requestTime: '',
                viewTime: '',
                status: ''

            },
            list: [],
            statusList: [],
            stepTitleList: ["提交看房请求","房东确认","线下看房","完成"],
            total: 0,
            infoFlag: false,
            logFlag: false,
            nullVale: '',
            pickerOptions: {
            shortcuts: [{
                text: '最近一周',
                onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
                }
            }, {
                text: '最近一个月',
                onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
                }
            }, {
                text: '最近三个月',
                onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit('pick', [start, end]);
                }
            }]
            },
            logList: [],
            desc: '',
            descList: [],
            permissionStrValue: ''

        }
    },
    created() {
        this.getStatusList();
        this.queryPage();
        //获取权限值
       this.permissionStrValue = JSON.parse(window.sessionStorage.getItem('permissionList')).toString();
    },
    methods: {
        async infoItem(id) {
            this.infoFlag = true;
            const{data: res}  = await this.$http.get('/house/view-request/view-request-details/' + id);
            if(!res.success) {
                return this.$message.error(res.message);
            }
            this.info = res.data.viewRequest;
        },
        async logStep(id) {
           this.logFlag = true;
           const{data: res} = await this.$http.get('/house/request-log/get-list/' + id);
           console.log(res)
           if(!res.success) {
                return this.$message.error(res.message);
            }
            this.logList = res.data.list;
            for(var i = 0; i < this.logList.length; i++) {
                this.descList[i] = this.logList[i].desc;
                this.desc = this.logList[i].desc;
                if(this.desc === '房东已取消') {
                    stepTitleList[1] = '房东已取消';
                }
            }
            
        },
        async queryPage() {
            const{data: res} = await this.$http.post('/house/view-request/list-page', JSON.stringify(this.queryParams), {
                headers: {
                    'Content-Type': 'application/json;charset=UTF-8',
                }
            })
            if(!res.success) {
                return this.$message.error(res.message);
            }
            console.log(res)
            this.list = res.data;
            this.total = res.total;

        },
        initTime(val) {
            if(val !== null) {
               this.queryParams.requestTimeStart = val[0];
               this.queryParams.requestTimeEnd = val[1];
            }
        },
         handleSizeChange(newPageSize) {
            this.queryParams.pageSize = newPageSize;
            this.queryPage();
        },
        handleCurrentChange(newPage) {
            this.queryParams.currPage = newPage;
            this.queryPage();

        },
        //看房时间
       async getStatusList() {
            var params = new Object();
            params.pageSize = 100;
            params.currPage = 1;
            params.type = '看房状态';
            const{data: res} = await this.$http.post('/base-data/list-page', JSON.stringify(params), {
                headers: {
                    'Content-Type': 'application/json;charset=UTF-8',
                }
            })
            if(!res.success) {
                return this.$message.error(res.message);
            }
            console.log(res)
            this.statusList = res.data

        },
    }
}
</script>